<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import CesiumTool from '@/utils/newCesiumTool/CesiumTool.js'
import { reactive } from "vue";

const cesiumObj = reactive({
  viewer: null,
  cesiumDraw: null
})

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
  // 资产地形

  loadLabel(viewer)
  // loadLabelsWithCanvas(viewer) //加载5w个随机点label
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      120.546,
      32.567,
      500
    ),
    endTransform: Cesium.Matrix4.IDENTITY,
  });
});

/**
* @author Xwd
* @description 绘制带有文字的图片-{文字尺寸+图片尺寸,可以进行按比例缩放}
* @param {textOptions} text:将要绘制的文本;fontSize:文本字体大小
* */
function getCanvasWithLabel(textOptions = {}) {
  //参数解构
  const { text = "", fontSize = 18, } = textOptions;
  //创建canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.globalAlpha = 0.0;
  canvas.style.border = `1px solid #000`;
  //计算文字大小
  const length = text.length;
  // console.log(ctx.measureText(text))
  const { width: fontWidth } = ctx.measureText(text);
  const { width: fontHeight } = ctx.measureText(text);
  //设置画布宽高-文字高度=画布高度；文字宽度=画布宽度
  const [canvasWidth, canvasHeight] = [(fontSize) * length, fontSize + 10];
  // console.log([canvasWidth, canvasHeight])
  canvas.width = canvasWidth;//image.width;
  canvas.height = canvasHeight;//image.height;
  // console.log()
  canvas.style.backgroundColor = "transparent"
  //绘制文字
  ctx.font = fontSize ? `bold ${fontSize}px Arial` : `bold 24px Arial`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillStyle = 'red';
  ctx.fillText(text, canvas.width / 2, fontSize + (canvas.height - fontSize) / 2);
  //返回canvas元素
  return canvas;
}

/**
 * 以canvas形式加载带文字的Label
 * */
function loadLabelsWithCanvas(viewer) {
  const spice = 256;
  let billboardCollection = new Cesium.BillboardCollection({ show: true });
  viewer.scene.primitives.add(billboardCollection);
  for (let i = 0; i < 15000; i++) {
    const canvas = getCanvasWithLabel({
      text: `Label`, fontSize: 18
    });//创建canvas元素
    const location = {
      longitude: 120 + Math.random(),
      latitude: 32 + Math.random(),
    }
    const cartesian3Pos = Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude, 0);
    billboardCollection.add({
      position: cartesian3Pos,
      image: canvas
    });
    if (i % spice === 0) {
      billboardCollection = new Cesium.BillboardCollection({ show: true });
      viewer.scene.primitives.add(billboardCollection);
    }
  }
}


/**
 * 以canvas形式加载带文字的Label
 * */
function loadLabel(viewer) {
  const spice = 256;
  let labelCollection = new Cesium.LabelCollection({ show: true });
  viewer.scene.primitives.add(labelCollection);

  for (let i = 0; i < 15000; i++) {
    const location = {
      longitude: 120 + Math.random(),
      latitude: 32 + Math.random(),
    }
    const cartesian3Pos = Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude, 0);
    labelCollection.add({
      position: cartesian3Pos,
      text: 'A label'
    });
    if (i % spice === 0) {
      labelCollection = new Cesium.LabelCollection({ show: true });
      viewer.scene.primitives.add(labelCollection);
    }
  }
}




</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
